<!--suppress ALL -->
<template>
    <div class="card rdsp-card-view pt-card" data-page="platform" id="content_platformCard_{{getNewId}}">
        <div class="card-content rank-content card-content-padding platform-card-content pt-card" >
           <div data-pagination='{"el": ".swiper-pagination"}' class="swiper-container swiper-init demo-swiper">
                  <div class="swiper-pagination"></div>
                 <div class="swiper-wrapper" style="height:170px;text-align: center;" id="platformContent_{{getNewId}}">
                           
                 </div>
           </div>
        </div>
    </div>
</template>

<style scoped>
    .platform-cards-logo img{
        background-color: #D6D6D6;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .platform-cards-logo{
        height: 65px;
        background-color: #D6D6D6;
        margin-bottom: 5px;
        text-align: center;
    }
    .platform-cards-nr{
        width: 100%;
        height: 90%;
        background-color: #fff;
        -webkit-box-shadow:0 2.5px 5.5px 0 rgba(0,0,0,.2);
         box-shadow: 0 2.5px 5.5px 0 rgba(0,0,0,.2);
        top: 5%;
        width: 94%;
        margin: 0 auto;
        border-radius: 6px;
        overflow: hidden;
    }
    .platform-cards-unit{
        font-size: 12px;
        color: #999999;
        margin-bottom: 3px;
    }
    .platform-cards-name{
        font-size: 12px;
        text-align: center;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
    }
    .platform-card-content{
      padding: 0;
      margin: 0 !important;
      height: 168px;
      background-color: #F4F4F4;
    }
    .demo-swiper .swiper-slide{
      border-radius: 10px;
      overflow: hidden;
      background: transparent;
    }
</style>
<script>
    return {
        data: function () {
            return {
                getNewId: (new Date()).getTime(),
                seletedPlatOrgId:0
            }
        },
        methods: {
            getPlatListData:function(type){
                var self = this;
                var $ = self.$$;
                $("#platformContent_" + self.getNewId).empty();
                Dao.getPlatList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgId: self.seletedPlatOrgId,
                    appKey: platformCode
                },function (data) {
                    if(data&&data.length>1){
                      $("#content_platformCard_" + self.getNewId).show();
                      let html  = '';
                      for(var i=0;i<data.length;i++){
                          //珠海的平台卡片特殊处理 edit by cdxu
                          html +=`
                            <div class="swiper-slide every-hidden-list" style="width:33%;">
                                    <div class="every-slide-flag every-hidden-list-flag platform-cards-nr" id="goToChildPlat` + i + `" data-id="` + data[i].orgIds + `" data-orgId="` + data[i].platformId + `" data-code="` + data[i].platformCode + `" data-type="` + data[i].platformName + `">
                                      <div class="platform-cards-logo" style="height: `+(platformCode!='zhws'?65:110)+`px"><img orgid="163" src="` + picNo(data[i].platformLogo) + `"></div>
                                      <p class="platform-cards-name">` + data[i].platformName + `</p>`
                          if (platformCode!='zhws'){
                              html += `<p class="platform-cards-unit"><span>接入单位</span><span style="color:#559CF7;">&nbsp;&nbsp;&nbsp;&nbsp;` + (data[i].platformOrgNum || 0) + `</span></p>
                                      <p class="platform-cards-unit"><span>告急单位</span><span style="color:#FFB3B3;">&nbsp;&nbsp;&nbsp;&nbsp;` + (data[i].platformOrgAlertNum || 0) + `</span></p>`
                          }
                          html += ` </div>
                            </div> `;
                      }
                        jQuery("#platformContent_" + self.getNewId).append(html).find(".every-hidden-list-flag").off('click').click(function(e){
                            let $dom = jQuery(e);
                            let orgIds=jQuery(e.currentTarget).attr("data-id");
                            let platName=jQuery(e.currentTarget).attr("data-type");
                            self.seletedPlatOrgId=jQuery(e.currentTarget).attr("data-orgId");
                            platformCode=jQuery(e.currentTarget).attr("data-code");
                            app.view.get("#home").router.currentPageEl.f7Component.morePlatToSingle(orgIds,platName);
                        });
                        app.swiper.create("#content_platformCard_" + self.getNewId +" .swiper-container", {
                            direction: 'horizontal',
                            loop: false,
                            slidesPerView:3
                        }); 
                    }else{
                      $("#content_platformCard_" + self.getNewId).hide();
                    }
                      $("#content_platformCard_" + self.getNewId+" .swiper-pagination-bullet-active,#content_platformCard_" + self.getNewId +" .swiper-pagination").hide();
                });
            }
        },
        on: {
            pageInit: function(e, page) {
              var self = this;
              self.seletedPlatOrgId = userInfor.org.id;
              self.getPlatListData();  
            },
      }
    }
</script>
